<template>
	<view class="DropDown">
		<uv-drop-down ref="dropDown" sign="UVDROPDOWN" text-active-color="#ff7f3b"
			:extra-icon="{ name: 'arrow-down-fill', color: '#666', size: '20rpx' }"
			:extra-active-icon="{ name: 'arrow-up-fill', color: '#ff7f3b', size: '20rpx' }" :defaultValue="defaultValue"
			@click="selectMenu" :is-sticky="false">
			<uv-drop-down-item v-for="item in menu_list" type="2" :name="item.name" :label="dropItem(item.name).label"
				:value="dropItem(item.name).value">
			</uv-drop-down-item>
		</uv-drop-down>
		<!-- <u-scroll-list indicatorColor='transparent' indicatorActiveColor='transparent' indicatorStyle=""> -->
		<!-- </u-scroll-list> -->
		<uv-drop-down-popup sign="UVDROPDOWN" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
			@clickItem="clickItem" @popupChange="change">
		</uv-drop-down-popup>
	</view>
</template>
<script setup lang="ts">
	import {
		computed, reactive, ref,
	} from 'vue';
	import {
		onPageScroll, onLoad
	} from '@dcloudio/uni-app'

	/** 下来菜单参数*/
	interface menuListType {
		/** 字段标识*/
		name : string
		/** 标题 */
		label : string,
		/** 参数取值默认值 */
		value : string,
		/** 选中参数*/
		activeIndex : number,
		/** 菜单子选项列表 */
		child : {
			label : string,
			value : string
		}[]
	}
	/** 接收参数 */
	interface propsType {
		/** 文字颜色 */
		color ?: string,
		/** 选中颜色*/
		activeColor ?: string,
		/** 是否吸顶*/
		sticky ?: boolean
		/** 菜单列表 */
		menu_list_data : menuListType[]
	}
	const dropItem = computed((name : string) => {
		return (name : string) => {
			const result_new = {} as { [key : string] : any };
			const find = result.find(item => item.name == name);
			if (find) {
				result_new.label = find.label;
				result_new.value = find.value;
			} else {
				const activeArr = menu_list.find(item => item.name == name) as menuListType;
				result_new.label = activeArr.label;
				result_new.value = activeArr.value;
			}
			return result_new;
		}
	})
	/** 被选中的菜单*/
	const activeName = ref('')
	/** 筛选选中对象 */
	const currentDropItem = computed(() => {
		return menu_list.find(item => item.name == activeName.value);
	})
	const props = withDefaults(defineProps<propsType>(), {
		sticky: false
	})
	const emit = defineEmits(['over'])
	const menu_list = props.menu_list_data
	/** 默认值 */
	const defaultValue = [0, 'all', '0'];
	// 筛选结果
	const result = reactive([])
	/** 监听弹窗状态*/
	const change = (e) => {
		const { show } = e;
		if (!show) {
			const obj : { [key : string] : any } = {}
			result.forEach(item => {
				const { name, value } = item
				obj[name] = value;
			})
			emit('over', obj)
		}
	}
	/**
	 * 点击每个筛选项回调
	 * @param {Object} e { name, active, type } = e
	 */
	const selectMenu = (e) => {
		const {
			name,
			active,
			type
		} = e;
		activeName.value = name;
		// type 等于1 的需要特殊处理：type不等于1可以忽略
		if (type == 1) {
			clickItem({
				name: 'vip_type',
				label: 'VIP文档',
				value: active ? 1 : 0
			});
		} else {
			const find = result.find(item => item.name == activeName.value);
			const activeArr = menu_list.find(item => item.name == activeName.value) as menuListType;
			if (find) {
				const findIndex = activeArr.child.findIndex(item => item.label == find.label && item
					.value == find.value);
				activeArr.activeIndex = findIndex;
			} else {
				activeArr.activeIndex = 0;
			}
		}
	}
	/**
	 * 点击菜单回调处理
	 * @param {Object} item 选中项 { label,value } = e
	 */
	const clickItem = (e) => {
		// 下面有重新赋值，所以用let
		let {
			label,
			value
		} = e;
		const activeArr = menu_list.find(item => item.name == activeName.value) as menuListType;
		const findIndex = result.findIndex(item => item.name == activeName.value);
		if (defaultValue.indexOf(value) > -1 && activeArr.label) {
			label = activeArr.label;
		}
		// 已经存在筛选项
		if (findIndex > -1) {
			result.splice(findIndex, 1, {
				name: activeName.value,
				label,
				value
			})
		} else {
			result.push({
				name: activeName.value,
				label,
				value
			});
		}
		result.splice(0, result.length, ...result.filter(item => defaultValue.indexOf(item.value) == -1))
	}
	/**  dom节点元素*/
	const dropDown : any = ref(null)
	onPageScroll(() => {
		dropDown.value.init();
	})
	onLoad(() => {
		setTimeout(() => {
			dropDown.value.init()
		}, 500)
	})
</script>
<style scoped lang="scss">
	.DropDown {
		width: 100%;
		z-index: -1;
	}

	:deep(.u-scroll-list) {
		z-index: -1;
	}

	:deep(.uv-drop-down) {
		min-width: 100vw;
		display: flex;
		justify-content: flex-start;
		// padding: 0 0rpx;
		z-index: -1;

		.uv-drop-down-item {
			z-index: -1;
		}
	}
</style>